<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :confirmLoading="isSubmiting"
    @cancel="close"
    @ok="handleSumbit"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :width="1400"
    :title="`${$isEmpty(data) ? '新增' : '修改'}租金标准`"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-row :gutter="16" type="flex">
          <a-col :span="12">
            <a-form-item label="标准名称">
              <a-input
                v-decorator="['StandardName', { rules: [{ required: true, message: '请输入标准名称' }] }]"
                placeholder="请输入标准名称"
              ></a-input>
              <span slot="extra" class="text-warning">温馨提示：最多可输入20个字符</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="辅助说明">
              <a-input
                v-decorator="['AuxiliaryExplain', { rules: [{ required: true, message: '请输入辅助说明' }] }]"
                placeholder="请输入辅助说明"
              ></a-input>
              <span slot="extra" class="text-warning">温馨提示：最多可输入20个字符</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="保障对象">
              <a-input
                v-decorator="['BZDX', { rules: [{ required: true, message: '请输入保障对象' }] }]"
                placeholder="请输入保障对象"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="基本租金标准">
              <a-input-number
                v-decorator="['BasicRentStandard', { rules: [{ required: true, message: '请输入基本租金标准' }] }]"
                :formatter="(value) => `${value}￥/㎡`"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="起止时间">
              <a-range-picker
                :showTime="{ defaultValue: [defaultTime, defaultTime] }"
                v-decorator="['StartTime', { rules: [{ required: true, message: '请输入起止时间' }] }]"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-textarea v-decorator="['Remark']" placeholder="请输入备注"></a-textarea>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="制定部门">
              <a-input
                v-decorator="['FormulateDepartment', { rules: [{ required: true, message: '请输入制定部门' }] }]"
                placeholder="请输入制定部门"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="制定时间">
              <a-date-picker
                valueFormat="YYYY-MM-DD HH:mm:ss"
                v-decorator="['Timing', { rules: [{ required: true, message: '请选择制定时间' }] }]"
                placeholder="请选择制定时间"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="文件号">
              <a-input
                v-decorator="['FileNumber', { rules: [{ required: true, message: '请输入文件号' }] }]"
                placeholder="请输入文件号"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="文件内容">
              <a-textarea
                v-decorator="['FileContents', { rules: [{ required: true, message: '请输入文件内容' }] }]"
                placeholder="请输入文件内容"
              ></a-textarea>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <fileList
              v-if="visible"
              ref="fileList"
              category="SCTP"
              tableNames="RentReductStandardManage"
              :fieldNames="{ label: 'DROPVALUE', value: 'DROPKEY' }"
              :fileList="rentData.SCWJJH"
            ></fileList>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { fileList } from '@/components'
import moment from 'moment'
import { postRentReductStandardManage, getRentReductStandardManageDetail } from '@/api/followUpManagement'
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    fileList
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      form: this.$form.createForm(this, { name: 'rentStandard' }),
      rentData: {},
      defaultTime: moment().hour(0).minute(0).second(0),
      isSubmiting: false
    }
  },
  methods: {
    fetchData () {
      if (!this.$isEmpty(this.data)) {
        this.spinning = true
        getRentReductStandardManageDetail({
          id: this.data.ID
        })
          .then((res) => {
            res.StartTime = res.StartTime.split(' - ')
            this.rentData = res
            this.$nextTick(() => {
              this.form.setFieldsValue(
                pick(res, [
                  'StandardName',
                  'AuxiliaryExplain',
                  'BZDX',
                  'BasicRentStandard',
                  'Remark',
                  'FormulateDepartment',
                  'Timing',
                  'FileNumber',
                  'FileContents',
                  'StartTime'
                ])
              )
            })
          })
          .finally(() => {
            this.spinning = false
          })
      }
    },
    close () {
      this.form.resetFields()
      this.rentData = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleSumbit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$refs.fileList.validateFields((uploadErr, fileData) => {
            if (!uploadErr) {
              const rentmanage = Object.assign(values, {
                ID: this.rentData.ID || 0,
                ClassType: '租金标准管理',
                UpdateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                WhetherExecutio: this.rentData.WhetherExecutio || 0,
                ReductionObject: '',
                ReductionTerm: '',
                ReductionProportion: '',
                SCWJJH: fileData,
                StartTime: values.StartTime.join(' - ')
              })

              this.isSubmiting = true
              postRentReductStandardManage({
                State: this.$isEmpty(this.data) ? 'add' : 'update',
                rentmanage
              })
                .then((res) => {
                  this.$emit('success', this.$isEmpty(this.data))
                  this.close()
                })
                .finally(() => {
                  this.isSubmiting = false
                })
            }
          })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item {
  .ant-input-number,
  .ant-calendar-picker {
    width: 100%;
  }
}
</style>
